<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<!-- 顶部文字 -->
		<text class="title title-box">账号密码登录</text>
		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<!-- 带选择框的隐私政策协议组件 -->
		<agreements scope="login" ref="agreements"></agreements>
		<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
		<!-- 忘记密码 -->
		<view class="link-box">
			<view>
				<text class="forget"></text>
				<text class="link"></text>
			</view>
			<text class="link" @click="navigateToFun('/pages/ucenter/register/register?type=2')">注册账号</text>
		</view>
		<!-- 悬浮登录方式组件 -->
		<view class="fab-login-box">
			<view class="item" @click="navigateToFun('/pages/ucenter/login/wxLogin')">
				<uni-icons type="weixin" size="30"></uni-icons>
				<text class="login-title">微信登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import agreements from '../agreement/index.vue';
	import mixin from '../common/js/login-page.mixin.js';
	export default {
		components: {
			agreements
		},
		mixins: [mixin],
		data() {
			return {
				"password": "",
				"username": "",
				"focusUsername": false,
				"focusPassword": false,
				"logo": "/static/logo.png"
			}
		},
		onShow() {

		},
		methods: {
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				}
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}

				if (this.needAgreements && !this.agree) {
					return uni.showToast({
						title: "请勾选《 用户服务协议 》和《 隐私政策条款 》",
						icon: 'none',
						duration: 2000
					});
				}

				let data = {
					"password": this.password,
					"username": this.username
				}

				this.$post(this.$api.wx.ucenter.mobileLogin, data).then(res => {
					uni.setStorage({
						key: "gkms-userInfo",
						data: res.userInfo
					})
					uni.setStorage({
						key: "token",
						data: res.token
					})
					uni.showToast({
						title: "登陆成功",
						icon: 'success'
					});
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/ucenter/index"
						})
					}, 1500)
				}).catch(e => {
					console.log(e)
					uni.showToast({
						title: e.data.msg,
						icon: 'error'
					});
				})

			},
			navigateToFun(url) {
				uni.navigateTo({
					url: url,
					fail(e) {
						console.error(e);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-content {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		// background: #FFF;
		padding: 0 20px;
		/* #endif */
	}

	.title {
		display: flex;
		padding: 18px 0;
		font-weight: 800;
		flex-direction: column;
	}

	.uni-btn {
		text-align: center;
		height: 40px;
		line-height: 40px;
		margin: 15px 0 0 0;
		color: #FFF !important;
		border-radius: 5px;
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}

	/* #ifndef APP-NVUE */
	.fab-login-box,
	.item {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.fab-login-box {
		// background-color: #FFF;
		flex-direction: row;
		flex-wrap: wrap;
		width: 750rpx;
		justify-content: space-around;
		position: fixed;
		left: 0;
	}

	.item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		cursor: pointer;
	}

	/* #ifndef APP-NVUE */
	.fab-login-box,
	.item {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.fab-login-box {
		// background-color: #FFF;
		flex-direction: row;
		flex-wrap: wrap;
		width: 750rpx;
		justify-content: space-around;
		position: fixed;
		left: 0;
	}

	.item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		cursor: pointer;
	}

	/* #ifndef APP-NVUE */
	@media screen and (min-width: 690px) {
		.fab-login-box {
			max-width: 500px;
			margin-left: calc(50% - 250px);
		}

		.item {
			height: 160rpx;
		}
	}

	@media screen and (max-width: 690px) {
		.fab-login-box {
			bottom: 10rpx;
		}
	}

	/* #endif */
	.logo {
		width: 60rpx;
		height: 60rpx;
		max-width: 40px;
		max-height: 40px;
		border-radius: 100%;
		border: solid 1px #F6F6F6;
	}

	.login-title {
		text-align: center;
		margin-top: 6px;
		color: #999;
		font-size: 10px;
		width: 70px;
	}
</style>
